<template>
    <div>
        <MyDialog title="添加服务器" :name="name" :width="width" :height="height" @before-open="onOpen">
            <el-form ref="addForm" :model="addForm" :rules="rules" :label-width="labelWidth" 
                :label-position="labelPosition" size="small">
                <el-row>
                    <el-col :span="10">
                        <el-form-item label="服务器名" prop="server_name">
                            <el-input v-model="addForm.server_name" placeholder="自定义昵称"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="10">
                        <el-form-item label="域名" prop="domain">
                            <el-input v-model="addForm.domain" placeholder="服务器域名"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="用户名" prop="username">
                            <el-input v-model="addForm.username" placeholder="连接用户名"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="10">
                        <el-form-item label="密码" prop="password">
                            <el-input type="password" v-model="addForm.password" placeholder="连接密码"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="端口" prop="port">
                            <el-input v-model.number="addForm.port" placeholder="连接端口"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="20">
                        <el-form-item label="备用域名" prop="bak_domain">
                            <el-input v-model="addForm.bak_domain" placeholder="备用域名多个用英文,隔开"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="10">
                        <el-form-item label="最大连接数" prop="max_num">
                            <el-input-number v-model="addForm.max_num" :min="1" label="最大连接数"></el-input-number>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="到期时间" prop="overdue">
                            <el-date-picker v-model="addForm.overdue" type="datetime" 
                                placeholder="选择到期时间" :picker-options="setPicker" @change="setOverdue">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="10">
                        <el-form-item label="备注" prop="remark">
                            <el-input type="textarea" v-model="addForm.remark" placeholder="备注"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10" :push="5">
                        <el-form-item>
                            <el-button type="info" size="mini" :loading="testLoading"
                                @click="handletestLink">测试连接
                            </el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="dialog-foot" class="dialog-footer">
                <el-button @click="handleClose" type="warning" size="medium">取 消</el-button>
                <el-button @click="beforeFormSubmit" type="primary" size="medium">保 存</el-button>
                <!-- <submit-button
                    :observer="dialogThis"
                    @click="beforeFormSubmit" >
                    保 存
                </submit-button> -->
            </div>
        </MyDialog>
    </div>
</template>

<script>
import DialogForm from '@/mix/DialogForm';
import { mapGetters } from 'vuex';

export default {
    name:'add-server',
    mixins:[DialogForm],
    data(){
        return {
            dialogThis:this,
            labelPosition:"right",
            labelWidth:'100px',
            addForm:{
                server_name:'',
                domain:'',
                bak_domain:'',
                username:'',
                password:'',
                port:8999,
                max_num:100,
                overdue:'',
                remark:''
            },
            rules:{
                server_name:[
                    {required:true,message:'填写名称',trigger:'blur'}
                ],
                domain:[
                    {required:true,message:'填写域名',trigger:'blur'}
                ],
                username:[
                    {required:true,message:'填写用户名',trigger:'blur'}
                ],
                password:[
                    {required:true,message:'填写密码',trigger:'blur'}
                ],
                port:[
                    
                    {required:true,message:'填写端口号',trigger:'blur'},
                    {type: 'number',message:'端口号为数字'}
                ],
                max_num:[
                    {required:true,message:'最大连接数',trigger:'blur'}
                ],
                overdue:[
                    {required:true,message:'过期时间',trigger:'blur'}
                ],
            },
            setPicker:{
                disabledDate:function(time){
                    return time.getTime() < Date.now()-8.64e7;
                }
            },
            passTest:false,
            testLoading:false
        }
    },
    methods:{
        onOpen(params){
            
        },
        getAjaxPromise(model){
            return this.ajaxProxy.create(model);
        },
        beforeFormSubmit(){
            if(this.passTest){
                this.formSubmit('addForm');
            }else{
                this.$message.error("测试通过才能保存");
            }  
        },
        setOverdue(v){
            this.addForm.overdue = v;
        },
        handletestLink(){
            let vmThis = this;
            let data = {
                domain:vmThis.addForm.domain,
                username:vmThis.addForm.username,
                password:vmThis.addForm.password,
                port:vmThis.addForm.port
            }
            this.$refs.addForm.validate((valid)=>{
                if(valid){
                    this.testLoading = true;
                    this.ajaxProxy.testLink(data).then(function(response){
                        if(response.data.status　==　0){
                            vmThis.$message.error(response.data.msg);
                            vmThis.passTest = false;
                            vmThis.testLoading = false;
                        }else{
                            vmThis.$message.success(response.data.msg);
                            vmThis.passTest = true;
                            vmThis.testLoading = false;
                        }
                    }).catch(function (error) {
                        console.log(error);
                        vmThis.$message.error('出错了');
                        vmThis.passTest = false;
                        vmThis.testLoading = false;
                    });
                }else{
                    console.log('error submit!!', 'addForm');
                    this.$emit('valid-error', 'addForm');
                    return false;
                }
            });
        },
        setSuccess(){
            this.passTest = false;
            this.$refs.addForm.resetFields();
        }
    },
    created(){
        this.$on('submit-success', this.setSuccess);
    }

}
</script>

<style scoped>

</style>

